<template>
    <div v-html="markdownHtml" class="md-text md-code"></div>
</template>

<script>
    var marked = require('marked')
    var highlight = require('highlight.js')

    const renderer = new marked.Renderer()
    marked.setOptions({
        renderer,
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        highlight: function (code) {
            return highlight.highlightAuto(code).value
        }
    })
    export default {
        props: {
            md: {
                required: true,
                type: String,
                default: ''
            }
        },
        computed: {
            markdownHtml() {
                return marked(this.md, {
                    sanitize: false
                })
            }
        }
    }
</script>

<style lang="less">
    @import "../../assets/less/md-code";
    @import "../../assets/less/md-text";
</style>

